<!-- 消费记录 -->
<template>
    <div class="page has-navbar has-tabbar order" v-tabbar-menu-index="2">
        <von-header theme="light">
            <span slot="title">消费记录</span>
        </von-header>
        <div class="page-content">
            <scroll class="orderList"
                    :on-infinite="onInfinite">
                <item v-for="(item, index) in orderList" :key="index" @click.native="onItemClick( item.orderId )" class="orderItem" :class="{'item-stable': index % 2 == 0}">
                    <div class="clearfix">
                        <span class="left" v-text="'订单号：'+item.code"></span>
                        <span class="right" v-text="'￥'+item.amount/100"></span>
                    </div>
                    <div class="clearfix">
                        <span class="left">{{item.paymentTime | numberToAllDate('')}}</span>
                        <span class="right" v-text="types[item.type]"></span>
                    </div>
                </item>

                <div v-if="!haveMore" slot="infinite" class="text-center">没有更多数据</div>
            </scroll>
        </div>

        <div id="orderModalBox" class="modal-backdrop hide">
            <div class="modal-backdrop-bg"></div>
            <div class="modal-wrapper">
                <div id="orderModal" class="modal slide-in-up">
                    <div class="bar bar-header bar-dark">
                        <h1 class="title">订单详情</h1>
                        <button class="button button-icon icon ion-ios-close-empty" @click="traggleModal"></button>
                    </div>
                    <scroll class="page-content">
                        <div class="companyName"><i class="iconfont icon-huoxingbushou"></i>火星云网络科技</div>
                        <div class="price" v-text="'￥'+orderData.amount.toFixed(2)"></div>
                        <div class="status" v-text="orderStatus"></div>
                        <div class="orderItem clearfix">
                            <div class="left">商户名称</div>
                            <div class="right" v-text="orderData.storeName"></div>
                        </div>
                        <div class="orderItem clearfix">
                            <div class="left">商户地址</div>
                            <div class="right" v-text="orderData.storeAddress"></div>
                        </div>
                        <div class="orderItem clearfix">
                            <div class="left">订单金额</div>
                            <div class="right" v-text="'￥'+orderData.amount"></div>
                        </div>
                        <div class="orderItem clearfix">
                            <div class="left">创建时间</div>
                            <div class="right">{{orderData.paymentTime | numberToAllDate('')}}</div>
                        </div>
                        <div class="orderItem clearfix">
                            <div class="left">订单号</div>
                            <div class="right" v-text="orderData.code"></div>
                        </div>
                        <accordion class="couponAndGood" default-index="0">
                            <accordion-item title="优惠券列表" :content-height="50*orderData.couponInstances.length+''">
                                <item v-for="(item, index) in orderData.couponInstances" :key="index">
                                    <div v-text="item.couponName"></div>
                                </item>
                            </accordion-item>
                            <accordion-item title="商品列表" :content-height="50*orderData.items.length+''">
                                <item v-for="(item, index) in orderData.items" :key="index">
                                    <div class="left" v-text="item.quantity+'×'+item.productName"></div>
                                    <div class="right" v-text="'￥'+item.dealPrice"></div>
                                </item>
                            </accordion-item>
                        </accordion>
                        
                    </scroll>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: ['openId'],
    data(){
        return {
            orderList: [],
            types: {
                'MEMBER_DEPOSIT': '充值',
                'SALES': '消费'
            },

            haveMore: true,
            pageSize: 20,
            curPage: 0,

            orderData: {amount:0, couponInstances:[],items:[]}, // 当前订单详情
            orderStatus: '', // 当前订单状态
        }
    },
    methods: {
        traggleModal: function () {
            document.getElementById('orderModal').className = 'modal slide-in-up';
            document.getElementById('orderModalBox').className = 'modal-backdrop hide';
        },
        onInfinite: function (done) {
            this.curPage++;
            this.$http.get(this.openId+'/orders?page='+this.curPage+'&size='+this.pageSize).then((res)=>{
                if ( !res.data[0] ) {
                    this.haveMore = false;
                    this.curPage--;
                    done();
                    return;
                }
                this.orderList = this.orderList.concat(res.data);
                done();
            }).catch(()=>{

            })
        },
        onItemClick: function ( orderId ) {
            this.$http.get(orderId + '/order-info').then((res)=>{
                this.orderData = res.data;
                if ( this.orderData.status == 'REFUNDED' ) {
                    this.orderStatus = '退款成功';
                } else if ( this.orderData.status == 'FINISHED' ) {
                    this.orderStatus = '交易成功';
                } else {
                    this.orderStatus = '待处理';
                }

                if ( this.orderData.type == 'MEMBER_DEPOSIT' && !this.orderData.items[0] ) {
                    this.orderData.items.push({
                        productName: '自定义充值',
                        quantity: 1,
                        dealPrice: this.orderData.amount,
                    })
                }

                document.getElementById('orderModalBox').className = 'modal-backdrop active';
                setTimeout(()=>{
                    document.getElementById('orderModal').className = 'modal slide-in-up ng-enter ng-enter-active active';
                })
            });
        },
    },
    created: function () {
        this.$http.get(this.openId+'/orders?page='+this.curPage+'&size='+this.pageSize).then((res)=>{
            this.orderList = res.data;
            if ( res.data.length < this.pageSize ) {
                this.haveMore = false;
            }
        }).catch(()=>{

        })
    },
    mounted(){

    },
}
</script>

<style lang="scss" scoped>
	@import "order";
</style>
